<template>
	<div id="">
		<Tree :data="data5" show-checkbox :render="renderContent"></Tree>
		<ltable></ltable>
		<Modal v-model="modal1" title="Common Modal dialog box title">
			<Input v-model="add.title" placeholder="Enter something..." style="width: 300px"></Input>
			<Button type="primary" @click="append">保存</Button>
		</Modal>

	</div>
</template>

<script>
	import ltable from './../../public/table.vue';
	export default {
		data() {
			return {
				modal1: false,
				data5: [{
					title: '根目录',
					expand: true,
					id: -1,
					render: (h, {
						root,
						node,
						data
					}) => {
						return h('span', {
							style: {
								display: 'inline-block',
								width: '100%'
							}
						}, [
							h('span', [
								h('Icon', {
									props: {
										type: 'ios-folder-outline'
									},
									style: {
										marginRight: '8px'
									}
								}),
								h('span', data.title)
							]),
							h('span', {
								style: {
									display: 'inline-block',
									float: 'right',
									marginRight: '32px'
								}
							}, [
								h('Button', {
									props: Object.assign({}, this.buttonProps, {
										icon: 'ios-plus-empty',
										type: 'primary'
									}),
									style: {
										width: '52px'
									},
									on: {
										click: () => {
											this.add.data = data;
											this.modal1 = true;
										}
									}
								})
							])
						]);
					},
					children: [

					]
				}],
				buttonProps: {
					type: 'ghost',
					size: 'small',
				},
				add: {
					data: {},
					title: ""
				}
			}
		},
		methods: {
			renderContent(h, {
				root,
				node,
				data
			}) {
				return h('span', {
					style: {
						display: 'inline-block',
						width: '100%'
					}
				}, [
					h('span', [
						h('Icon', {
							props: {
								type: 'ios-paper-outline'
							},
							style: {
								marginRight: '8px'
							}
						}),
						h('span', data.title)
					]),
					h('span', {
						style: {
							display: 'inline-block',
							float: 'right',
							marginRight: '32px'
						}
					}, [
						h('Button', {
							props: Object.assign({}, this.buttonProps, {
								icon: 'ios-plus-empty'
							}),
							style: {
								marginRight: '8px'
							},
							on: {
								click: () => {
									this.add.data = data;
									this.modal1 = true;
								}
							}
						}),
						h('Button', {
							props: Object.assign({}, this.buttonProps, {
								icon: 'ios-minus-empty'
							}),
							on: {
								click: () => {
									this.remove(root, node, data)
								}
							}
						})
					])
				]);
			},
			append() {
				const children = this.add.data.children || [];

				this.$ajax({
					url: "/right",
					method: "post",
					data: {
						"children": [{}],
						"remark": "none",
						"right_code": "none",
						"right_name": this.add.title,
						"tenant_id": "1",
						"uplink": this.add.data.id,
						"url": "none"
					}
				}).then((d)=>{
					console.log(d)
					children.push({
					title: this.add.title,
					id:d.id,
					expand: true
				});
					this.$set(this.add.data, 'children', children);
					this.modal1 = false
				})

				
			},
			remove(root, node, data) {
				this.$ajax({
					url: "/right/"+data.id,
					method: "delete",
					data: {
					}
				}).then(()=>{
				
				const parentKey = root.find(el => el === node).parent;
				const parent = root.find(el => el.nodeKey === parentKey).node;
				const index = parent.children.indexOf(data);
				parent.children.splice(index, 1);
				})
				
			}
		},
		mounted() {
			this.$ajax({
				url: "/right/getRightTree",
				method: "get",
				data: {

				}
			}).then((d) => {
				let a = {
					children: d.data
				}

				function tree(data) {

					if(data && data.children && data.children.length > 0) {

						return {
							id: data.id,
							title: data.right_name,
							expand: true,
							children: data.children.map((t) => {
								return tree(t)
							})
						}
					} else {

						return {
							expand: true,
							id: data.id,
							title: data.right_name
						}
					}

				}
				this.data5[0].children = tree(a).children
			})
		},
		components: {
			ltable
		}
	}
</script>

<style>

</style>